<template>
  <div class="place">
    <HeaderTop name="目的地" />
    <div class="place_content">
      <!-- 左侧侧边栏 -->
      <div class="place_content_left">
        <van-sidebar v-model="active" @change="onChange(active)">
          <van-sidebar-item
            v-for="item in placeDatas"
            :key="item.id"
            :title="item.label"
          />
        </van-sidebar>
      </div>
      <!-- 右侧内容 -->
      <div class="placeContent">
        <div class="placeContent_top">
          <div
            class="placeBig"
            v-for="item in placeChildren"
            :key="item.id"
            @click="goDistrict(item.id, item.label)"
          >
            <img :src="item.img" />
            <div class="hotel">
              <span>{{ item.name_en }}</span>
              <p>{{ item.label }}</p>
            </div>
          </div>
        </div>
        <div class="hotPlace">
          <span class="hotTitle">热门推荐</span>
          <ul>
            <li
              v-for="item in placeProduct"
              :key="item.id"
              @click="goDetail(item.id)"
            >
              <img :src="item.img" />
              <span class="hot_name">{{ item.title }}</span>
              <p>{{ item.subtitle }}</p>
              <span class="price">￥{{ item.price }}起/人</span>
              <div class="private">{{ item.product_type_name }}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <Loading :isShow="show" />
  </div>
</template>

<script setup>
import Loading from "@/components/loading.vue";
import { reqPlace } from "@/api/place";
import { ref } from "vue";
import { useRouter } from "vue-router";
import HeaderTop from "@/components/HeaderTop.vue";
let router = useRouter();
let show = ref(true);
let active = ref(0);
let placeDatas = ref("");
let placeChildren = ref("");
let placeProduct = ref("");
const onChange = (index) => {
  let placeArr = placeDatas.value;
  placeChildren.value = placeArr[index].children;
  placeProduct.value = placeArr[index].product;
  console.log(placeChildren.value);
  console.log(placeProduct.value);
};
// onChange(active.value);
const initPlace = async () => {
  const result = await reqPlace();
  console.log(result.data.list);
  if (result.code == 0) {
    placeDatas.value = result.data.list;
    placeChildren.value = result.data.list[0].children;
    placeProduct.value = result.data.list[0].product;
    show.value = false;
  }
};
initPlace();
const goDistrict = async (id, name) => {
  console.log(id);
  router.push({
    path: "/citys",
    query: {
      district_id: id,
      name,
    },
  });
};
const goDetail = (id) => {
  router.push({
    path: "/detail",
    query: {
      id,
    },
  });
};
</script>
<style scoped>
.place {
  width: 100%;
  height: 100%;
  font-weight: 500;
}
.placeContent {
  flex: 1;
  padding: 0.3rem;
  box-sizing: border-box;
  height: 100%;
  overflow-y: scroll;
}
.place_content {
  width: 100%;
  height: 100%;
  display: flex;
  padding-top: 0.8rem;
  box-sizing: border-box;
}
.place_content_left {
  height: 580px;
  /* height: 100%; */
  overflow-y: scroll;
}
.placeContent_top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.placeContent_top img {
  display: block;
  width: 2.47rem;
  height: 1.44rem;
  margin: 0.1rem 0;
  border-radius: 0.06rem;
}
.placeBig {
  height: 82px;
  position: relative;
}
.hotel {
  width: 80%;
  height: 60%;
  border: 1px solid #d4d4d4;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hotel p {
  font-size: 0.32rem;
}
.hotel span {
  font-size: 0.24rem;
}

.hotPlace .hotTitle {
  height: 50px;
  font-size: 0.32rem;
  display: flex;
  align-items: center;
  padding-left: 4px;
}
.hotPlace ul li {
  width: 100%;
  height: 252px;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.private {
  width: 46px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 0.06rem;
  background-color: #333;
  color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0.3rem;
  font-size: 0.16rem;
}
.hotPlace li img {
  width: 100%;
  border-radius: 0.1rem;
}
.hotPlace .hot_name {
  display: inline-block;
  width: 100%;
  margin: 0.1rem 0;
  font-size: 0.2rem;
}
.hotPlace li p {
  width: 100%;
  font-size: 0.2rem;
  color: #666;
  margin: 0.1rem 0;
}
.price {
  width: 100%;
  font-size: 0.2rem;
  color: #c04374;
  margin-top: 0.1rem;
}
</style>
